<!--用户管理-->
<template>
  <div>
    <Form :model="searchObj" inline="false">
      <FormItem>
        <Input v-model="searchObj.userName" placeholder="姓名" />
      </FormItem>
      <FormItem>
        <Input v-model="searchObj.mobile" placeholder="电话" />
      </FormItem>
      <FormItem>
        <Input v-model="searchObj.email" placeholder="邮箱" />
      </FormItem>

      <FormItem>
        <Select v-model="searchObj.status" placeholder="是否禁用">
          <Option value="0">禁用</Option>
          <Option value="1">未禁用</Option>
        </Select>
      </FormItem>

      <FormItem>
        <i-button type="primary" shape="circle" icon="ios-search" @click="serach">搜索</i-button>
      </FormItem>

      <FormItem>
        <i-button type="primary" shape="circle" icon="ios-search" @click="resetSearch">重置</i-button>
      </FormItem>

      <FormItem>
        <i-button type="primary" shape="circle" @click="addAdmin" v-has="admin/addAdmin">新增管理员</i-button>
      </FormItem>
      <FormItem>
        <i-button type="primary" @click="exportExcel" v-has="admin/exportAdmin">excel导出</i-button>
      </FormItem>
    </Form>

    <!--条件-->

    <i-table :columns="columns1" :data="data1"></i-table>
    <Page
      :total="pageData.total"
      :current="pageData.current"
      :page-size="pageData.size"
      show-elevator
      show-total
      @on-change="changePage"
    ></Page>

    <!--用户绑定角色页面-->
    <Modal v-model="roleDig" title="权限管理" @on-ok="ok" @on-cancel="cancel">
      <i-table :columns="roleColumns" :data="roleData" width="1000px" ref="selection"></i-table>
    </Modal>

    <!--新增管理员账号页面-->
    <Modal v-model="addDig" title="新增管理员账号" @on-ok="ok" @on-cancel="cancel">
      <Form :model="adminObj" :label-width="80" ref="formCustom" :rules="ruleForm">
        <FormItem label="账号" prop="userName">
          <Input v-model="adminObj.userName" placeholder="账号名称名称,不能和已存在账号重名..." />
        </FormItem>

        <FormItem label="邮箱" prop="adminEmail">
          <Input v-model="adminObj.email" />
        </FormItem>

        <FormItem label="手机号">
          <Input v-model="adminObj.mobile" />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="submitAdmin" v-has="admin/addAdmin">提交</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import {
  userPage,
  bindRole,
  addAdmin,
  adminActive,
  disableAccount,
  exportExcel
} from "@/api/adminApi";
import { roleList } from "@/api/roleApi";
import { dealPageData } from "@/utils/myPageUtil";
import { formatDate } from "@/utils/dateUtil";

import { Button } from "iview";
export default {
  name: "userInfo",
  //用于刷新页面
  inject: ["reload"],
  data() {
    return {
      searchObj: {},
      roleData: [], //角色数据
      data1: [], //用户数据
      roleDig: false, //角色页面
      userId: 0, //用户id
      addDig: false,
      adminObj: {
        email: "",
        userName: "",
        mobile: ""
      },
      /*表单校验*/
      ruleForm: {
        userName: [
          { required: true, message: "账号名称不能为空", trigger: "blur" }
        ],
        adminEmail: [
          //TODO 校验邮箱正则
          { required: false, message: "邮箱必填", trigger: "blur" }
        ]
      },
      pageData: {
        total: 0,
        current: 1,
        size: 10,
        data: []
      },
      roleColumns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "角色名称",
          key: "roleName"
        },
        {
          title: "角色code",
          key: "roleCode"
        },
        {
          title: "角色描述",
          key: "roleDesc"
        },
        {
          title: "是否启用",
          key: "status",
          render: (h, params) => {
            if (params.row.status == 1) {
              return h("span", "未禁用");
            } else {
              return h("span", "禁用中");
            }
          }
        },
        {
          title: "创建人",
          key: "creator"
        },
        {
          title: "修改人",
          key: "modifier"
        },
        {
          title: "创建时间",
          key: "createTime"
        },
        {
          title: "修改时间",
          key: "updateTime"
        }
      ],

      columns1: [
        {
          title: "头像",
          key: "avatar",
          render: (h, params) => {
            return h("div", [
              h("img", {
                attrs: {
                  src: params.row.avatar
                },
                style: {
                  width: "80px",
                  height: "60px"
                }
              })
            ]);
          }
        },
        {
          title: "姓名",
          key: "userName"
        },
        {
          title: "密码",
          key: "passWord"
        },
        {
          title: "电话",
          key: "mobile"
        },
        {
          title: "邮箱",
          key: "email"
        },
        {
          title: "qq号码",
          key: "qqNumber"
        },
         {
          title: "微信",
          key: "weChat"
        },
        {
          title: "简介",
          key: "summary"
        },
        {
          title: "是否禁用",
          key: "status",
          render: (h, params) => {
            if (params.row.status == 1) {
              return h("span", "未禁用");
            } else {
              return h("span", "禁用中");
            }
          }
        },
        {
          title: "出生日期",
          key: "birthday"
        },
        {
          title: "创建时间",
          key: "createTime"
        },
        {
          title: "修改时间",
          key: "updateTime"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            return h("div", [
              //渲染一个div标签
              h(
                Button, //在div标签下渲染一个iview组件
                {
                  props: {
                    //传递参数
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    //设置样式
                    marginRight: "5px"
                  },
                  on: {
                    //监听$emit事件
                    click: () => {
                      this.openRole(params.row.id);
                    }
                  },
                  // 使用自定义指令
                  directives: [
                    {
                      name: "has",
                      // 如有其他参数可以在此添加
                      expression: "admin/bindRole"
                    }
                  ]
                },
                "绑定角色"
              ),
              h(
                Button, //在div标签下渲染一个iview组件
                {
                  props: {
                    //传递参数
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    //设置样式
                    marginRight: "5px"
                  },
                  on: {
                    //监听$emit事件
                    click: () => {
                      this.activeAccount(params.row.id);
                    }
                  },
                  // 使用自定义指令
                  directives: [
                    {
                      name: "has",
                      // 如有其他参数可以在此添加
                      expression: "admin/adminActive"
                    }
                  ]
                },
                "激活账号"
              ),
              h(
                Button,
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.disableAccount(params.row.id);
                    }
                  },
                  // 使用自定义指令
                  directives: [
                    {
                      name: "has",
                      // 如有其他参数可以在此添加
                      expression: "admin/disableAccount"
                    }
                  ]
                },
                "禁用"
              )
              /* h(
                Button,
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              ) */
            ]);
          }
        }
      ]
    };
  },
  methods: {
    remove(index) {
      this.data1.splice(index, 1);
    },
    ok() {
      this.bindRole();
    },
    cancel() {
      this.$Message.info("点击了取消");
    },
    openRole(userId) {
      //先清空上一次的数据,防止交互不好
      this.roleData = {};
      this.roleDig = true;
      //打开角色列表页面
      this.userId = userId;
      //请求角色数据
      roleList(userId).then(res => {
        if (res.data.code == 200) {
          //填充角色列表
          this.roleData = res.data.data;
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    bindRole() {
      let arr = this.$refs.selection.getSelection();
      let roleIdList = [];
      arr.forEach(item => {
        roleIdList.push(item.id);
      });
      //用户绑定菜单
      bindRole(this.userId, roleIdList).then(res => {
        if (res.data.code == 200) {
          //关闭绑定页面，重新刷新主页面
          this.$Message.info("角色绑定成功!");
          this.roleDig = false;
          this.reload();
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    changePage(index) {
      this.searchObj.current = index;
      this.searchObj.size = this.pageData.size;
      userPage(this.searchObj).then(res => {
        if (res.data.code == 200) {
          //处理分页
          this.pageData = dealPageData(res.data);
          this.data1 = this.pageData.data;
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    addAdmin() {
      //新增管理员
      this.addDig = true;
    },
    submitAdmin() {
      this.$refs.formCustom.validate(valid => {
        if (valid) {
          addAdmin(this.adminObj).then(res => {
            if (res.data.code == 200) {
              this.$Message.info("新增管理员账号成功");
              this.addDig = false;
              this.reload();
            }
          });
        }
      });
    },
    activeAccount(id) {
      //账号激活
      adminActive(id).then(res => {
        if (res.data.code == 200) {
          this.$Message.info("激活成功");
          this.reload();
        }
      });
    },
    disableAccount(id) {
      //账号禁用
      disableAccount(id).then(res => {
        if (res.data.code == 200) {
          this.$Message.info("禁用成功");
          this.reload();
        }
      });
    },
    exportExcel() {
      //导出excel
      exportExcel();
    },
    serach() {
      this.searchObj.current = 1;
      this.searchObj.size = this.pageData.size;
      userPage(this.searchObj).then(res => {
        if (res.data.code == 200) {
          //处理分页
          this.pageData = dealPageData(res.data);
          this.data1 = this.pageData.data;
        }
      });
    },
    resetSearch(){
      this.searchObj = {};
    }
  },
  created() {
    //初始化分页
    userPage({ current: 1, size: this.pageData.size }).then(res => {
      if (res.data.code == 200) {
        //处理分页
        this.pageData = dealPageData(res.data);
        this.data1 = this.pageData.data;
      }
    });
  }
};
</script>

<style scoped>
</style>
